<template>
	<view>
		<usersHearder :message='message' :personalUserId='personalUserId'/>
		<view class="body" :style="{height:height}" v-if="list.length>0" >
			<xgWaterfall :columnCount="2"   :left-gap='"30rpx"' :right-gap='"30rpx"' :column-gap='"30rpx"' @success='success' :list='list'>
				<xgWaterfallItem  v-for='(item,index) in list' :key='index' >
					<fineArt :message='item' @praise='homeDesignPraise' :index='index'/>
				</xgWaterfallItem>
			</xgWaterfall>
		</view>
		<view class="none" v-if="list.length<=0&&!showLoading">
			<image src="/static/img/none.png" mode=""></image>
			<text v-if="userId!=personalUserId">TA还没发表艺术精品</text>
			<text v-else>空空如也，赶紧去发布</text>
		</view>
		<uni-load-more status="loading"  v-if="showLoading" style="margin-top: 30rpx;"/>
		<uni-load-more status="noMore" v-if="list.length>0&&!showLoading&&!hasMore"  style="margin-top: 30rpx;"/>
		<view style="height: 118rpx;" v-if="list.length>0"></view>
		<view class="footer" v-if="isFocus&&userId!=personalUserId">
			<view v-if="isFocus=='Y'" @tap="toCancel">
				<text>已关注</text>
			</view>
			<view class="no" v-if="isFocus!='Y'" @tap="toFollow">
				<image src="/static/svg/addGuan.svg" mode=""></image>
				<text>加关注</text>
			</view>
			<view class="xian"></view>
			<view @tap="toPrivateLetter">
				<text>私信</text>
			</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import url from '@/common/util/personal.js'
	import urls from "@/common/util/homeArtIndex.js"
	import usersHearder from "@/components/otherHomepage/usersHearder.vue"
	import fineArt from "@/components/index/fineArt.vue"
	import xgWaterfall from "@/components/xg-waterfall/xg-waterfall.vue"
	import xgWaterfallItem from "@/components/xg-waterfall-item/xg-waterfall-item.vue"
	export default {
		components: {usersHearder,fineArt,xgWaterfall,xgWaterfallItem,uniLoadMore},
		data() {
			return {
				message:{},
				isFocus:false,
				height:0,
				personalUserId:"",
				userId:localStorage.getItem("userId"),
				list:[],
				showLoading:false,
				hasMore:true,
				pageNumber:1
			};
		},
		onLoad(e) {
			this.personalUserId=e.userId
		},
		onReachBottom(){
			if(this.hasMore){
				this.pageNumber+=1
				this.getList()
			}
		},
		onShow() {
			this.list=[]
			this.pageNumber=1
			this.hasMore=true
			this.fixed=true
			this.getList()
			this.getMessage()
		},
		methods:{
			async getList(){
				this.showLoading=true
				let res=await urls.personalSoft({userId:localStorage.getItem("userId"),coverUserId:this.personalUserId,page:this.pageNumber,count:12})
				if(res.data.hasMore==0){
					this.hasMore=false
				}else{
					this.hasMore=true
				}
				if(res.data.list){
					this.list.push.apply(this.list,res.data.list)
				}
				this.showLoading=false
			},
			async getMessage(){
				let res=await url.getHome({userId:this.personalUserId,selfId:this.userId})
				this.message=res.data
				if(this.message.isFocus){
					this.isFocus=this.message.isFocus
				}
			},
			toPrivateLetter(){
				console.log('私信')
				
			},
			async toCancel(){
				let res=await url.noFocus({userId:this.userId,focusUserId:this.personalUserId})
				if(res.code==0){
					this.isFocus='N'
					this.message.fansNum-=1
				}
			},
			async toFollow(){
				if(!localStorage.getItem('userId')){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				let res=await url.focusUser({userId:this.userId,focusUserId:this.personalUserId})
				if(res.code==0){
					this.isFocus='Y'
					this.message.fansNum+=1
				}
			},
			success(e){
				if(e!=0){
					this.height=e+'px'
				}
			},
			homeDesignPraise(index,isAlready){
				if(!isAlready){
					this.list[index].zan="1"
					this.list[index].zanNumber-=1
				}else{
					this.list[index].zan="0"
					this.list[index].zanNumber+=1
				}	
			}
		}	
	}
</script>

<style lang="scss">
page{
	background-color:#F7F7F7 ;
}	
.footer{
	height: 88rpx;
	display: flex;
	box-shadow:0px -1rpx 0px 0px rgba(0,0,0,0.08);
	align-items: center;
	position: fixed;
	width: 750rpx;
	z-index: 100;
	bottom: 0;
	left: 0;
	background-color: #FFFFFF;
	view{
		width:374.5rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		text{
			font-size: 32rpx;
			color: #666666;
			letter-spacing: 1rpx;
		}
		image{
			height: 22rpx;
			width: 22rpx;
			margin-right: 7rpx;
		}
	}
	.no{
		text{
			color: #C84739;
		}
	}
	.xian{
		width: 1rpx;
		height: 54rpx;
		background-color: #DDDDDD;
	}
}
.body{
	width: 750rpx;
	display: flex;
	flex-wrap: wrap;
	box-sizing: content-box;
}
.none{
	padding-top:188rpx ;
	display: flex;
	flex-flow: column;
	align-items: center;
	image{
		height: 340rpx;
		width: 400rpx;
	}
	text{
		font-size:30rpx ;
		line-height: 30rpx;
		letter-spacing: 1rpx;
		margin-top: 24rpx;
		color: #333333;
	}
}
</style>
